<template>
	<view class="container">
		<m-header class="top" :list="adDatas"></m-header>
		<view class="shuzi u-m-t-20">
			<view class="count u-p-t-36 u-p-b-10 u-flex u-row-center">
				<u-count-to class="count-to" ref="uCountTo" :autoplay="autoplay" :startVal="startVal" :endVal="endVal" :duration="duration"
				 :decimals="decimals" :bold="bold" :fontSize="fontSize" :color="color"></u-count-to>
				<text class="u-m-l-10">名优秀伙伴为您服务</text>
			</view>

			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">

				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我是" prop="iam">
					<view style="width:100%;text-align: right;color: #4B9CFF;"  @click="showIam = true">{{model.iam || "请选择"}}</view>
					<u-picker
						mode="selector"
						v-model="showIam"
						@confirm="function (e){return confirm(e,selectIam,'iam')}"
						:range="selectIam"
						range-key="name"
					></u-picker>
				</u-form-item>
				<u-form-item class="group"  :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我需要" prop="ineed">
					<view style="width:100%;text-align: right;color: #4B9CFF;" @click="showineed = true">{{model.ineed || "请选择"}}</view>
					<u-picker mode="selector" v-model="showineed" @confirm="function (e){return confirm(e,selectineed,'ineed')}"
					 :range="selectineed" range-key="name"></u-picker>
				</u-form-item>
				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我意向" prop="imean">
					<view style="width:100%;text-align: right;color: #4B9CFF;" @click="toimean">{{model.imean || "请选择"}}</view>
				</u-form-item>

				<block v-if="model.intention != undefined">
					<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="活动名称" prop="tdmc">
						<u-input :border="border" placeholder="请输入" v-model="model.intention.tdmc" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="拼团人数" prop="ptrs">
						<u-input :border="border" placeholder="请输入" v-model="model.intention.ptrs" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="true"
					 label="男性人数" prop="nsrs">
						<u-input :border="border" placeholder="请输入" v-model="model.intention.nsrs" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="true"
					 label="女性人数" prop="nxrs">
						<u-input :border="border" placeholder="请输入" v-model="model.intention.nxrs" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="true"
					 label="年龄" prop="nl">
						<u-input type="select" :select-open="selectShowNl" v-model="model.intention.nl" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowNl = true"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
					 label="活动地点" prop="hddd">
						<u-input type="select" :select-open="selectShowQydz" v-model="model.intention.hddd" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowQydz = true"></u-input>
					</u-form-item>
					<!-- <u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="活动地点" prop="region" label-width="400">
					<u-input :border="border" type="select" :select-open="pickerShow" input-align="right" placeholderStyle="color: #0D1D36;" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
				</u-form-item> -->
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="时间安排" prop="timeBetween">
						<u-input :border="border" @click="dianji" placeholder="请选择" v-model="model.intention.timeBetween" type="text" input-align="right"></u-input>
						<u-calendar v-model="show" ref="calendar" @change="change" :mode="mode" :start-text="startText" :end-text="endText"
						 :range-color="rangeColor" max-date="2022-10-01" :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor">
						</u-calendar>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="true"
					 label="活动经费" prop="hdjf">
						<u-input type="select" :select-open="selectShowHdjf" v-model="model.intention.hdjf" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowHdjf = true"></u-input>
					</u-form-item>
					<view class="u-flex u-row-start qita u-p-30">
						<image src="../../static/img/shuoming.png"></image>
						<view class="u-m-l-20">活动简介</view>

					</view>
					<u-form-item class="zwpj u-m-l-30 u-m-r-30 " :label-position="labelPosition" prop="hdjj">
						<u-input type="textarea" :border="border" placeholder="请输入活动简介" v-model="model.intention.hdjj" />
					</u-form-item>

				</block>
				<block v-if="model.activityId != undefined">
					<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
					 label="选择团队" prop="hdjf">
						<u-input type="select" v-model="model.activity" placeholder="请选择" placeholderStyle="color: #0D1D36;" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="团队人数" prop="num">
						<u-input :border="border" placeholder="请输入" v-model="model.num" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="目的地" prop="area">
						<u-input :border="border" placeholder="请输入" v-model="model.area" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="活动时间" prop="timeInterval">
						<u-input :border="border" placeholder="请选择" v-model="model.timeInterval" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="需求资金" prop="needMoney">
						<u-input :border="border" placeholder="请输入" v-model="model.needMoney" type="text" input-align="right"></u-input>
					</u-form-item>
					<view class="u-flex u-row-start qita u-p-30">
						<image src="../../static/img/shuoming.png"></image>
						<view class="u-m-l-20">商业策划</view>

					</view>
					<u-form-item class="zwpj u-m-l-30 u-m-r-30 " :label-position="labelPosition" prop="content">
						<u-input type="textarea" :border="border" placeholder="请输入活动简介" v-model="model.content" />
					</u-form-item>
					<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业地域" prop="dizhi">
						<u-input type="select" v-model="model.dizhi" placeholder="请选择" placeholderStyle="color: #0D1D36;" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="企业性质" prop="xingzhi">
						<u-input type="select" v-model="model.xingzhi" placeholder="请选择" placeholderStyle="color: #0D1D36;" input-align="right"></u-input>
					</u-form-item>

				</block>
					<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="关键字" prop="gjz">
					<u-input :border="border" placeholder="请输入" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="屏蔽关键字" prop="pbgjz">
					<u-input :border="border" placeholder="请输入" v-model="model.pbgjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" label="匹配时效" prop="ppsx">
					<u-input type="select" v-model="model.ppsx" placeholder="请选择" placeholderStyle="color: #0D1D36;" input-align="right"
					 @click="showDate = true"></u-input>

					<u-calendar v-model="showDate" ref="calendar" @change="changeDate" mode="date" :start-text="startText" :end-text="endText"
					 :range-color="rangeColor" max-date="2022-10-01" :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor">
					</u-calendar>

				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
				 label="匹配权重" prop="customize">
					<view style="flex: 1;text-align: right;" @click="handleClickWeight">
						<u-icon name="arrow-right" style="color:#9DA2B0;font-size: 32upx;"></u-icon>
					</view>
				</u-form-item>
				<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
			</u-form>
		</view>
		<view class="warp u-p-30">
			<u-button class="button" @click="submit">马上为我匹配</u-button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			let that = this;
			return {
				dataSource: [
					{ id: 1,
					   name: '个人',
					   child: []
					}
				],
				name: '请选择',
				classifyArr: [
					[],
					[]
				], // picker - 数据源
				classifyIndex: [0, 0], // picker - 索引

				childArr: [], // 二级分类数据源
				model: {},
				selectIam: ['个人', '团队'],
				showIam: false,
				showineed: false,
				selectineed: ['旅游活动', '体育活动'],



				//选择城市
				selectShowQydz: false,
				showCity: false,
				defaultValue: [3],
				listCitys: [],
				show: false,
				showDate: false,
				mode: 'range',
				result: "开始时间   至   结束时间",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				/**
				 * form验证
				 * */
				wxyList: [],
				wyxList: [],
				sqzz: 0,
				selectList1: [{
						value: '申请赞助',
						label: '申请赞助'
					},
					{
						value: '自费',
						label: '自费'
					}
				],
				selectList2: [{
						value: '100',
						label: '100'
					},
					{
						value: '50',
						label: '50'
					}
				],
				rules: {
					ws: [{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}],
					wxy: [{
						required: false,
						message: '请选择我需要',
						trigger: 'change'
					}],
					wyx: [{
						required: false,
						message: '请选择我意向',
						trigger: 'change'
					}]
					
				},
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowZyp: false,
				selectShowWs: false,
				selectShowWxy: false,
				selectShowWyx: false,
				selectShowPtrs: false,
				selectShowNsrs: false,
				selectShowNxrs: false,
				selectShowNl: false,
				selectShowHddd: false,
				selectShowHdjf: false,
				selectShowPpsx: false,
				pickerShow: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				reqBody: {},
				/**/

				/**
				 * 数字统计
				 * */
				startVal: 500,
				endVal: 500,
				separator: ',',
				decimals: 0,
				duration: 2000,
				autoplay: true,
				useEasing: true,
				current: 3,
				isStop: false,
				bold: false,
				fontSize: 24,
				color: '#fff',
				/**/
				keyIndex: 0,
				keywords: [{
					name: '企业',
					selected: true
				}, {
					name: '设计师',
					selected: false
				}, {
					name: '监理',
					selected: false
				}, {
					name: '大型企业',
					selected: false
				}, {
					name: '采购',
					selected: false
				}, {
					name: '监理',
					selected: false
				}],
				adDatas:[]
			};
		},
		mounted() {},
		onLoad(options) {
			//获取省市区
			this.cityList();
			if (options.row) {
				this.model = JSON.parse(decodeURIComponent(options.row));
				console.log(this.model);
			}
			if (this.$store.state.userInfo) {
				if (this.$store.state.userInfo.identityType == 1) {
					this.selectIam = ["企业", "团队"];
				}
			}
			this.getAllClassify();
			this.findfetchAd(9);
			this.findextraIndex();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async findextraIndex(){
				let result = await this.$apis.extraIndex();
				this.endVal = this.endVal + result.data;
			},
			async findfetchAd(type){
				let result = await this.$apis.fetchAd({type:type});
				this.adDatas = result.data;
			},	
			// 获取数据源并分出一级二级
			getAllClassify() {
				let dataLen = this.dataSource.length;
				if(dataLen !== 0){
					for (let i = 0; i < dataLen; i++) {
						// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
						this.childArr.push(this.dataSource[i].child)
					};

					// 一级分类的数据源
					this.classifyArr[0] = this.dataSource;

					// 第一次打开时，默认给一级分类添加它的二级分类
					this.classifyArr[1] = this.childArr[0]
				}
			},

			// 选择商品分类
			classifyChange(e) {
				let value = e.target.value;
				this.classifyIndex = value;

				if (this.classifyArr[0].length != 0) {
					this.name = this.classifyArr[0][this.classifyIndex[0]].name
				};

				if (this.classifyArr[1].length != 0) {
					this.name += ',' + this.classifyArr[1][this.classifyIndex[1]].name
				}
			},

			// 获取二级分类
			columnchange(e) {
				console.log('childArr',e);
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.classifyArr[1] = this.childArr[e.detail.value]

					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					// this.$set(this.classifyArr, 1, this.childArr[e.detail.value])
					// #endif
				}
			},
			confirm(e, list, type) {
				var itemKey = e[0];
				if (type == 'iam') {
					this.model = {};
				}
				console.log(this.model)
				this.model[type] = list[itemKey];
				console.log(this.model)
				var model = encodeURIComponent(JSON.stringify(this.model));
				if(type == "ineed" && this.model.iam == '团队'){
					uni.navigateTo({
						url:"/pages/wisdomcommune/component/wxyActivity?data="+model
					})
				}
			},
			toimean() {
				if (this.model.iam === undefined) {
					uni.showToast({
						title: "请选择我是",
						icon: "none"
					})
				} else {
					this.$mRouter.push({
						route: this.$mRoutesConfig.addActivity,
						query: {
							data: encodeURIComponent(JSON.stringify(this.model))
						}
					})
				}
			},
			confirmCity(e) {
				this.model.hddd = '';
				e.map((val, index) => {
					this.model.hddd += this.model.hddd == '' ? val.label : '-' + val.label;
				})
			},
			async cityList() {
				let result = await this.$apis.fetchArea({level:2});	
				this.listCitys = result.data;
			},
			handleClickWeight(e) {
				var model = encodeURIComponent(JSON.stringify(this.model));
				let url = encodeURIComponent(JSON.stringify("wisdomcommune/smartActivities"));

				uni.navigateTo({
					url: '../user/personWeight?type=' + url + '&row=' + model
				})

			},
			//新增项目
			async submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.matching();
						// this.saveActivity();
					} else {
						console.log('验证失败');
					}
				});

			},

			//活动匹配并新增
			async matching() {
				console.log(this.model);
				try {
					let reqBody = {};
					let data = [];
					if (this.model.iam != '团队') {

						reqBody['name'] = this.model.intention.tdmc;
						reqBody['ages'] = this.model['nl'];
						reqBody['isSponsor'] = this.sqzz;
						reqBody['introduction'] = this.model['hdjj'];
						reqBody['timeBetween'] = this.model.timeBetween;
						reqBody['man'] = parseInt(this.model['nsrs']);
						reqBody['woman'] = parseInt(this.model['nxrs']);
						reqBody['place'] = this.model['hddd'];
						reqBody['bestKey'] = this.model.gjz;
						reqBody['blackKey'] = this.model.pbgjz;
						reqBody['remarks'] = this.model.qtsm;
						reqBody['expiryTime'] = this.model.ppsx;
						reqBody['iam'] = this.model.iam;
						reqBody['imean'] = this.model.imean;
						reqBody['ineed'] = this.model.ineed;
						reqBody['weight'] = this.model.weight;
						reqBody['intention'] = this.model.intention;
						data = await this.$apis.activitiesMatching(reqBody);	
					} else {
						delete this.model.activity;
						data = await this.$apis.sqzzMatching(this.model);
					}
					if (data.code == 200) {
						uni.showToast({
							title: "服务匹配成功",
							icon: 'none'
						});
						setTimeout(() => {
							this.$mRouter.switchTab({
								route: this.$mRoutesConfig.message
							});
						}, 2000)
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none'
						});
						return;
					}
				} catch (e) {
					console.log(e);
					this.submitBtnDis = false;
				}
			},
			selectKey(e) {
				this.keywords[e].selected = !this.keywords[e].selected;
			},
			//选择日期
			change(e) {
				this.model.timeBetween = e.startDate + " - " + e.endDate;
			},
			changeDate(e) {
				this.model.ppsx = e.result;
			},
			dianji() {
				this.show = true;
			},
			// 选择地区回调
			regionConfirm(e) {
				this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择
			selectConfirmWs(e) {
				this.model.ws = '';
				e.map((val, index) => {
					this.model.ws += this.model.ws == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmWxy(e) {
				this.model.wxy = '';
				e.map((val, index) => {
					this.model.wxy += this.model.wxy == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmWyx(e) {
				this.model.wyx = '';
				e.map((val, index) => {
					this.model.wyx += this.model.wyx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmPtrs(e) {
				this.model.ptrs = '';
				e.map((val, index) => {
					this.model.ptrs += this.model.ptrs == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmNsrs(e) {
				this.model.nsrs = '';
				e.map((val, index) => {
					this.model.nsrs += this.model.nsrs == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmNxrs(e) {
				this.model.nxrs = '';
				e.map((val, index) => {
					this.model.nxrs += this.model.nxrs == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmNl(e) {
				this.model.nl = '';
				e.map((val, index) => {
					this.model.nl += this.model.nl == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmHddd(e) {
				this.model.hddd = '';
				e.map((val, index) => {
					this.model.hddd += this.model.hddd == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmHdjf(e) {
				if (e[0].value == "申请赞助") {
					this.sqzz = 1
				} else {
					this.sqzz = 0
				}
				this.model.hdjf = '';
				e.map((val, index) => {
					this.model.hdjf += this.model.hdjf == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmPpsx(e) {
				this.model.ppsx = '';
				e.map((val, index) => {
					this.model.ppsx += this.model.ppsx == '' ? val.label : '-' + val.label;
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	// page {
	// 	background: #f5f5f9;
	// }
	.top {
		width: 100%;
		height: 260rpx;
		background: #ab61ff;

		.above {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 46rpx;

			}
		}

		.below {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 46rpx;
				margin-top: 1rpx;
			}
		}
	}

	.qita {

		image {
			width: 29rpx;
			height: 29rpx;
			;
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}

	.count {
		margin-top: -50rpx;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.fgx1 {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 151rpx auto 73rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.word {
		font-size: 36rpx;
		color: #0d1d36;
		font-weight: bold;
	}
</style>
